<template>
  <div class="search">
      <van-nav-bar  left-arrow 
        @click-left="onClickLeft" 
        @click-right="onClickRight"
        :fixed="true"
        :placeholder="true"
        right-text="搜索"
        :border="false"
        >
        <template #left>
            <van-icon name="arrow-left" size="20"/>
        </template>
        <template #title>
            <van-search v-if="word" v-model="value" :placeholder="word" ref="focus" autofocus @search="toSearch" @focus="onfocus"/>
            <van-search v-else v-model="value" autofocus/>
        </template>
     </van-nav-bar>

     <div class="first" v-if="!search_show">
        <div class="hot_search" v-if="!suggests.length">
            <p v-if="dg_history.length">历史搜索</p>
            <div class="button" v-if="dg_history.length">
                <van-button type="default" size="small" 
                    v-for="(list,index) in dg_history" 
                    :key="index" 
                    @click="toSearch(list)"
                >{{list}}</van-button>
            </div>
            <p>热门搜索</p>
            <div class="button">
                <van-button type="default" size="small" 
                    v-for="(list,index) in lists" 
                    :key="index" 
                    :style="{color:list.color, borderColor:list.borderColor}"
                    @click="toSearch(list.title)"
                >{{list.title}}</van-button>
            </div>
        </div>
        <ul class="s_suggest" v-if="suggests.length">
            <li v-for="(item,index) in suggests" :key="index" class="s_suggest_li" @click="toSearch(item.name)">
                <div>
                    <span v-for="(i,i_index) in item.suggests_names" :key="i_index" :class="{blod:i.is_bold}">{{i.suggests_name}}</span>
                </div>
                <div 
                    v-if="item.tag || false" 
                    :style="{color:item.tag.text_color,
                        borderColor: item.tag.border_color,
                        backgroundColor:item.tag.background_color
                    }" class="tag"
                >{{item.tag.name}}</div>
            </li>
        </ul>
     </div>
    

    <!-- <keep-alive> -->
     <div class="detail" v-if="search_show">
         <div>
            <van-tabs v-model="active" @click="toLoveList">
                <van-tab title="综合">
                    <SearchDetail :search_list="search_list"/>
                </van-tab>
                <van-tab title="收藏高">
                    <SearchDetail :search_list="love_list"/>
                </van-tab>
                <van-tab title="学做多">
                    <SearchDetail :search_list="do_list"/>
                </van-tab>
                <van-tab>
                    <template #title>
                        <div class="video">
                            <span>视频</span>
                            <img src="../assets/images/play1.png" alt="" width="20">
                        </div>
                    </template>
                    <Loading v-if="!mv_list.length"/>
                    <ul v-else>
                        <Lists v-for="(list,index) in mv_list" :key="index" :list="list.r"/>
                    </ul>
                </van-tab>
            </van-tabs>
         </div>
     </div>
    <!-- </keep-alive> -->
  </div>
</template>

<script>
import axios from "axios"
import _ from "lodash"
import { getHotWord,getSearchDetail } from "@/apis/index";
import SearchDetail from  "@/components/SearchDetail.vue"
import Lists from  "@/components/Lists.vue"
import Loading from  "@/components/Loading.vue"

export default {
    name: 'search',
    props:["searchword"],
components:{
    SearchDetail,
    Lists,
    Loading,
},
data() {
    return {
      value: '',
      lists: null,
      words: null,
      word: null,
      suggests: [],
      search_list: [],
      love_list:[],
      do_list:[],
      mv_list:[],
      active: 0,
      search_show:false,
      v: '',
      dg_history: [],
    };
  },
  created: async function () {
    this.search_show=false;
    this.dg_history = JSON.parse(window.localStorage.getItem("dg_history")) || []
    this.lists = (await getHotWord(10)).data.result.suggestdetails;
    this.words = await this.lists.map( item => `${item.title}`);
    await this.changePlaceholder();
  },
  watch:{
    searchword:{
        immediate: true,
        handler:function(n){
            console.log(n);
            this.search_show=true;
            this.value = this.$route.query.word;
            this.toSearch();
        }
    },
     word:function(word){
         this.$emit('placeholder',word);
        //  console.log(word);
     },
     value: _.debounce( function(n){
         if(!n){
             return this.suggests = [];
        }
        else{
            getSearchDetail(n).then( res => {
                this.suggests = res.data.result.suggests;
            })
        }
        // console.log(this.suggests);
    }, 500),
  },
 methods:{
    onfocus(){
        // console.log(111);
        this.search_show = false;
        this.search_list = [];
        this.love_list = [];
        this.do_list = [];
        this.mv_list = [];
    },
    toSearch(title=this.value){
        // console.log(title);
        if(title){
            this.toSearchDetail(title);
            this.search_show = true;
            this.value = title;
            // var history = JSON.parse(window.localStorage.getItem("dg_history")) || []
            this.dg_history = [title,...this.dg_history];
            this.dg_history = [ ...new Set(this.dg_history)]
            window.localStorage.setItem('dg_history', JSON.stringify(this.dg_history));
        }
        
    },
    toSearchDetail: function(n){
        axios.get("https://apis.netstart.cn/douguo/recipe/search",{
            params: {
              keyword: n,
              offset:0,
              limit:20,
            },
          }).then((res) => {
              this.search_list = res.data.result.list;          
          })
    },
    toLoveList(name){
        if(name == 1){
            axios.get("https://apis.netstart.cn/douguo/recipe/search",{
                params: {
                  keyword: this.value,
                  offset:0,
                  limit:20,
                  order:2,
                },
              }).then((res) => {
                  this.love_list = res.data.result.list;          
              })
        }
        if(name == 2){
            axios.get("https://apis.netstart.cn/douguo/recipe/search",{
                params: {
                  keyword: this.value,
                  offset:0,
                  limit:20,
                  order:3,
                },
              }).then((res) => {
                  this.do_list = res.data.result.list;          
              })
        }
        if(name == 3){
            axios.get("https://apis.netstart.cn/douguo/recipe/search",{
                params: {
                  keyword: this.value,
                  offset:0,
                  limit:20,
                  type:1,
                },
              }).then((res) => {
                  this.mv_list = res.data.result.list;          
              })
        }
        console.log(name);
    },
    onClickLeft(){
        if(this.search_show){
            this.search_show = false;
            this.search_list = [];
            this.love_list = [];
            this.do_list = [];
            this.mv_list = [];
        }
        if(this.value){
            this.value = '';
        }
        else{ 
            this.suggests = [];
            this.$router.go(-1);
        }
    },
    onClickRight(){
      this.toSearch(this.value);
    },
    changePlaceholder(){
        this.word = this.words[1];
        setInterval(() => {
            var random = Math.floor(Math.random()*( this.words.length ));
            this.word = this.words[random];
        },10000);
    }
  }
}
</script>

<style lang="less" >
.search{
    .detail{
        padding: 0 15px;
        position: relative;
        .van-tabs {
            .van-tabs__wrap{
                border: 1px solid #f3f2f2;
                border-left: none;
                border-right: none;
                .van-tabs__nav--line{
                    // width: 200px;
                    .van-tab{
                        width: 50px;
                        -webkit-flex:0;
                        flex: none;
                        justify-content: flex-end;
                        &:nth-child(4){
                            width: 100px;
                            flex: 1;
                        }
                    }
                }
                .van-tabs__line{
                    display: none;
                }
            }
            .van-tabs__content{
                .bottom{
                    display: none;
                }
            }
        }
        .video{
            /* position: absolute;
            right: 15px;
            top: 12px; */
            font-size: 14px;
            img{
                vertical-align: middle;
                margin-bottom: 3px;
                margin-left: 5px;
            }
        }
    }
    .s_suggest{
        padding: 15px;
        .s_suggest_li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 40px;
            border-bottom: 1px solid rgb(233, 228, 228);
            .blod{
                font-weight: 600;
            }
            .tag{
                font-size: 13px;
                padding: 2px 5px;
                border: 1px solid red;
                border-radius: 15px;
            }
        }
    }
    .van-nav-bar{
        .van-icon,.van-nav-bar__text{
            color: black;
        }
        
        
        .van-nav-bar__content{
            height: 70px;
            .van-nav-bar__title{
                /* margin-left: 100px;
                font-size: 20px; */
                max-width: 100%;
                width: 70vw;
                .van-search{
                    padding: 0;
                    .van-search__content{
                        border-radius: 5px;
                        align-items: center;
                        height: 40px;
                        
                    }
                }
            }
        }
    }
    .hot_search{
        /* padding: 20px;
        padding-top: 0; */
        p{
            margin-left: 20px;
            font-weight: 600;
        }
        .button{
            margin-left: 5px;
            margin-right: 10px;
            margin-bottom: 7px;
            // margin-top: 15px;
            .van-button{
                margin-left: 10px;
                margin-top: 10px;
                background-color: #fafafa;
                // margin-left: 10px;
            }
            .van-button--default{
                border: 1px solid #fafafa;
                border-radius: 5px;
            }
            .van-button--small{
                font-size: 14px;
            }
        }
    }
}
</style>